<template>
  <div>
    <div ref="pieChartContainer" style="width: 400px; height: 400px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, watch } from 'vue'
import * as echarts from 'echarts'
import { dayjs } from "element-plus"
const props = defineProps(['coundata', 'title', 'xing'])
const pieChartContainer = ref(null)
let pieChart = null
const isinit = ref(false)
const cchaerdata = ref([...props.coundata])
const initInventoryStatusChart = () => {
  let tadata = []
  cchaerdata.value.forEach(element => {
    if (props.title == '车辆') {
      tadata.xtable.push((element.abnormal_type))
      tadata.ytable.push(element.totalcount)
    } else if (props.title == '应急') {
      tadata.push(
        {
          value: element.LEVEL_COUNT,
          name: element.EMERGENCE_PLAN_LEVEL
        }
      )
    } else if (props.title == '环') {
      tadata.push(
        {
          value: element.Plan_Reviewed_State_Count,
          name: element.PLAN_REVIEWED_STATE == 1 ? '有效' : '超期'
        }
      )
    } else {

      tadata.push(
        {
          value: element.event_type,
          name: element.abnormal_type
        }
      )
    }
  })

  if (isinit.value == false) {
    pieChart = echarts.init(pieChartContainer.value)
  }
  const pieOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        type: 'pie',
        radius: props.xing == '环状' ? ['40%', '70%'] : '50%',

        label: {
          show: false,
          position: 'center'
        },

        data: tadata
      }
    ]
  }
  pieChart.setOption(pieOption)
}
const formatDateTimess = (dateTimeString, str) => {
  if (!dateTimeString) return null
  if (str != 'date') {
    const date = dayjs(dateTimeString).format('YYYY-MM-DD HH:mm:ss')
    return date
  } else {
    const date = dayjs(dateTimeString).format('YYYY-MM-DD')
    return date
  }

}
onMounted(() => {

  initInventoryStatusChart()
})
watch(() => props.coundata, (val) => {
  cchaerdata.value = val
  isinit.value = true
  initInventoryStatusChart()
}) 
</script>

<style lang="scss" scoped>
</style>
